---
title: "MCP Docs Server"
description: "Learn how to use the assistant-ui MCP documentation server in your IDE to access documentation and examples directly."
---

import { Tabs, Tab } from "fumadocs-ui/components/tabs";

`@assistant-ui/mcp-docs-server` provides direct access to assistant-ui's documentation and examples in Cursor, Windsurf, VSCode, Zed, Claude Code, or any other IDE or tool that supports MCP.

The MCP server tools have been designed to allow an agent to query the specific information it needs to complete an assistant-ui related task - for example: implementing chat components, integrating with different runtimes, understanding component architecture, and troubleshooting issues.

## How it works

Once it's installed in your IDE you can write prompts and assume the agent will understand everything about assistant-ui.

### Add features

- "Add a chat interface with streaming support to my app"
- "Implement branching conversations with the BranchPicker component"
- "Add attachment support to my assistant using the Attachment primitive"

### Ask about integrations

- "How do I integrate assistant-ui with the Vercel AI SDK?
  Show me a working example for my Next.js app"
- "Does assistant-ui support React Server Components? How do I use it?"
- "Can I use assistant-ui with LangGraph? Show me how to set up the runtime"

### Debug or update existing code

- "My Thread component isn't updating when new messages arrive, what could be wrong?"
- "How do I customize the styling of the AssistantModal component?"
- "I need to add tool UI rendering to my assistant, show me how to implement it"

**And more** - if you have a question, try asking your IDE and let it look it up for you.

## Installation

Choose your IDE or tool to get started with the assistant-ui MCP docs server.

### Claude Code

Add the MCP server using the Claude Code CLI:

```bash
# Add to current project only
claude mcp add assistant-ui -- npx -y @assistant-ui/mcp-docs-server

# Or add globally for all projects
claude mcp add --scope user assistant-ui -- npx -y @assistant-ui/mcp-docs-server
```

To manage the server:
```bash
# View configured servers
claude mcp list

# Get server details
claude mcp get assistant-ui

# Remove the server
claude mcp remove assistant-ui
```

### Claude Desktop

Add to your Claude Desktop configuration:
- macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
- Windows: `%APPDATA%\Claude\claude_desktop_config.json`

```json
{
  "mcpServers": {
    "assistant-ui": {
      "command": "npx",
      "args": ["-y", "@assistant-ui/mcp-docs-server"]
    }
  }
}
```

### IDEs

For Cursor, Windsurf, VSCode, and Zed, manually add the following configuration:

- **Cursor**: Edit `.cursor/mcp.json` in your project root, or `~/.cursor/mcp.json` for global configuration
- **Windsurf**: Edit `~/.codeium/windsurf/mcp_config.json` (only supports global configuration)
- **VSCode**: Edit `~/.vscode/mcp.json` in your project root
- **Zed**: Edit `settings.json` (open via `cmd+,` or `zed: open settings`)

### MacOS/Linux

{/*
LLM CONTEXT: This Tabs component shows MCP server configuration for different IDEs on MacOS/Linux.
Each tab displays the JSON configuration needed to set up the assistant-ui MCP docs server in that specific IDE.
The tabs help users find the correct configuration format for their IDE (Cursor, Windsurf, VSCode, or Zed).
Each tab shows the exact JSON structure and file paths needed for that IDE's MCP configuration.
*/}

<Tabs items={["cursor", "windsurf", "vscode", "zed"]}>
  <Tab>
```json
{
  "mcpServers": {
    "assistant-ui": {
      "command": "npx",
      "args": ["-y", "@assistant-ui/mcp-docs-server"]
    }
  }
}
```
  </Tab>
  <Tab>
```json
{
  "mcpServers": {
    "assistant-ui": {
      "command": "npx",
      "args": ["-y", "@assistant-ui/mcp-docs-server"]
    }
  }
}
```
  </Tab>
  <Tab>
```json
{
  "servers": {
    "assistant-ui": {
      "command": "npx",
      "args": ["-y", "@assistant-ui/mcp-docs-server"],
      "type": "stdio"
    }
  }
}
```
  </Tab>
  <Tab>
```json
{
  "context_servers": {
    "assistant-ui": {
      "command": {
        "path": "npx",
        "args": ["-y", "@assistant-ui/mcp-docs-server"],
        "env": {}
      },
      "settings": {}
    }
  }
}
```
  </Tab>
</Tabs>

### Windows

{/*
LLM CONTEXT: This Tabs component shows MCP server configuration for different IDEs on Windows.
Each tab displays the Windows-specific JSON configuration needed to set up the assistant-ui MCP docs server.
The tabs help Windows users find the correct configuration format for their IDE, using cmd instead of direct npx.
Each tab shows the Windows-specific command structure needed for that IDE's MCP configuration.
On latest Windsurf and Cursor the direct npx command works, while it's still unconfirmed if this has been fixed for VSCode.
*/}

<Tabs items={["cursor", "windsurf", "vscode", "zed"]}>
  <Tab>
```json
{
  "mcpServers": {
    "assistant-ui": {
      "command": "npx",
      "args": ["-y", "@assistant-ui/mcp-docs-server"]
    }
  }
}
```
  </Tab>
  <Tab>
```json
{
  "mcpServers": {
    "assistant-ui": {
      "command": "npx",
      "args": ["-y", "@assistant-ui/mcp-docs-server"]
    }
  }
}
```
  </Tab>
  <Tab>
```json
{
  "servers": {
    "assistant-ui": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@assistant-ui/mcp-docs-server"],
      "type": "stdio"
    }
  }
}
```
  </Tab>
  <Tab>
```json
{
  "context_servers": {
    "assistant-ui": {
      "command": {
        "path": "cmd",
        "args": ["/c", "npx", "-y", "@assistant-ui/mcp-docs-server"],
        "env": {}
      },
      "settings": {}
    }
  }
}
```
  </Tab>
</Tabs>

## After Configuration

### Claude Code

The MCP server starts automatically once added. You can verify it's working by mentioning assistant-ui in your prompts - Claude will have direct access to the documentation and examples.

### Claude Desktop

1. Restart Claude Desktop after updating the configuration
2. The MCP server will start automatically when Claude Desktop launches
3. You can verify it's working by asking about assistant-ui - Claude will have direct access to the documentation and examples

### Cursor

1. Open Cursor settings by pressing `Cmd/Ctrl + ,`
2. Navigate to the MCP settings section
3. Find "assistant-ui" in the list of MCP servers and click "enable"
4. The server should start automatically. You'll see a status indicator showing it's running
5. If you have an agent chat open, you'll need to re-open it or start a new chat to use the MCP server

The MCP server will automatically start whenever you open Cursor. You can verify it's working by mentioning assistant-ui documentation or examples in your prompts - the agent should now have direct access to this information.

### Windsurf

1. Fully quit and re-open Windsurf
2. The MCP server should start automatically. You can verify this in the MCP settings panel
3. If tool calls start failing, go to Windsurf's MCP settings and re-start the MCP server. This is a common Windsurf MCP issue and isn't specific to this server. Currently, Cursor's MCP implementation tends to be more stable than Windsurf's

In both IDEs it may take a minute for the MCP server to start the first time as it needs to download the package from npm.

### VSCode

1. Open VSCode settings by pressing `Cmd/Ctrl + ,`
2. Search for "MCP" in the settings search bar
3. Enable the "Chat > MCP" option by checking the checkbox
4. Open GitHub Copilot Chat and switch to "Agent" mode (MCP only works in Agent mode)
5. Open the `mcp.json` file and click the "start" button that appears in the editor
6. Once started, you can click the tools button in the Copilot pane to see available tools

The tools button should show "assistantUIDocs" and "assistantUIExamples" as available tools when the server is running correctly.

### Zed

1. Open Zed settings by pressing `Cmd/Ctrl + ,` or using `zed: open settings`
2. The MCP server configuration should be in your `settings.json` under the `context_servers` key
3. The server will start automatically when you use the Assistant Panel
4. You can also add servers through the Agent Panel's Settings view (accessible via `agent: open configuration`)
5. In the Assistant Panel, you can verify the server is available by checking the tools dropdown

Zed will automatically start the MCP server when needed. The assistant-ui documentation and examples will be available to the AI assistant in your conversations.

### Claude Desktop

1. Restart Claude Desktop after updating the configuration
2. The MCP server will start automatically when Claude Desktop launches
3. You can verify it's working by asking about assistant-ui - Claude will have direct access to the documentation and examples

## Available Agent Tools

### assistantUIDocs

Access assistant-ui's complete documentation:

- Getting started guides and installation instructions
- Component API references (Thread, AssistantModal, Composer, etc.)
- Runtime documentation (AI SDK, LangGraph, OpenAI Assistants)
- Integration guides and best practices
- Architecture and concept explanations

### assistantUIExamples

Browse complete code examples:

- Integration with Vercel AI SDK
- React Server Components implementation
- LangGraph runtime setup
- OpenAI Assistants integration
- Local Ollama usage
- External store management
- React Hook Form integration
- Tool UI implementation patterns

Each example includes full source code, configuration files, and implementation details that can be directly referenced or adapted for your project.

## Common Issues

1. **Server Not Starting**

   - Ensure npx is installed and working
   - Check for conflicting MCP servers
   - Verify your configuration file syntax
   - On Windows, make sure to use the Windows-specific configuration

2. **Tool Calls Failing**
   - Restart the MCP server and/or your IDE
   - Update to the latest version of your IDE

{/*
Attribution:
  This docs page, and `@assistant-ui/mcp-docs-server`, is inspired by and based on Mastra's excellent mcp docs server and docs page: https://github.com/mastra/mcp-docs-server/blob/main/docs/mcp-docs-server.mdx
*/}
